<template>
      <div class="app-container">
            <div class="filter-container">
                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <!-- 品牌管理标签 -->
                        <el-tab-pane label="品牌管理" name="brandManage">
                              <div class="app-container" v-if="activeName === 'brandManage'">
                                    <div class="filter-container">
                                          <el-select class="filter-item" v-model="inPageTemp.eqptUnitType" placeholder="请选择设备/部件类型">
                                                <el-option v-for="brandEqpt in inPageBrandEqptUnitList" :key="brandEqpt.dictKey" :label="brandEqpt.dictValue" :value="brandEqpt.dictKey"></el-option>
                                          </el-select>
                                          <el-button class="filter-item" type="primary" icon="search" @click="getBrandInfo">搜索</el-button>
                                          <el-button class="filter-item" style="float:right;margin-left:5px;" icon="edit" @click="createBrand">
                                                新增
                                          </el-button>
                                          <el-button class="filter-item" style="float:right;margin-left:5px;" @click="importVisible=true,importStatus='brand'">导入</el-button>
                                          <el-dropdown class="filter-item" style="float:right" trigger="click" @command="brandexport">
                                                <el-button>
                                                      导出
                                                </el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item command="all">导出列表</el-dropdown-item>
                                                      <el-dropdown-item command="template">导出模版</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                                    </div>
                                    <el-table :data="tableData" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

                                          <el-table-column align="center" label="序号" width="65">
                                                <template scope="scope">
                                                      <span>{{scope.$index+1+(listQuery.page-1)*listQuery.limit}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="设备/部件类型">
                                                <template scope="scope">
                                                      <span>{{scope.row.eqptTypeName}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="品牌名称">
                                                <template scope="scope">
                                                      <span>{{scope.row.brandName}}</span>
                                                </template>
                                          </el-table-column>
                                          <el-table-column align="center" label="操作">
                                                <template scope="scope">
                                                      <el-button size="small" type="success" @click="updateBrand(scope.row)">
                                                            编辑
                                                      </el-button>
                                                      <el-button size="small" type="danger" @click="deleteBrand(scope.row)">
                                                            删除
                                                      </el-button>
                                                </template>
                                          </el-table-column>
                                    </el-table>
                                    <div v-show="!listLoading" class="pagination-container">
                                          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="this.listQuery.total">
                                          </el-pagination>
                                    </div>
                              </div>
                        </el-tab-pane>
                        <!-- 设备型号标签 -->
                        <el-tab-pane label="设备型号" name="deviceType">
                              <div class="app-container" v-if="activeName === 'deviceType'">
                                    <div class="filter-container">
                                          <el-select class="filter-item" v-model="inPageTemp.eqptType" placeholder="请选择设备类型" @change="selectEqpt">
                                                <el-option v-for="brandEqpt in inPageEqptList" :key="brandEqpt.dictKey" :label="brandEqpt.dictValue" :value="brandEqpt.dictKey"></el-option>
                                          </el-select>
                                          <el-select class="filter-item" v-model="inPageTemp.brandId" placeholder="请选择品牌">
                                                <el-option v-for="brand in inPageBrandList" :key="brand.brandId" :label="brand.brandName" :value="brand.brandId"></el-option>
                                          </el-select>
                                          <el-button class="filter-item" type="primary" icon="search" @click="getEqptListInfo">搜索</el-button>
                                          <el-dropdown class="filter-item" style="float:right" trigger="click" @command="handleCommand">
                                                <el-button icon="edit">
                                                      新增
                                                </el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item v-for="eqpt in eqptList" :key="eqpt.dictKey" :command="eqpt.dictKey">{{eqpt.dictValue}}</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                                          <el-dropdown class="filter-item" style="float:right;margin-right:5px;" trigger="click" @command="UnitTypeimport">
                                                <el-button>
                                                      导入
                                                </el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item command="1">导入服务器列表</el-dropdown-item>
                                                      <el-dropdown-item command="2">导入交换机列表</el-dropdown-item>
                                                      <el-dropdown-item command="4">导入防火墙列表</el-dropdown-item>
                                                      <el-dropdown-item command="5">导入CPE列表</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                                          <el-dropdown class="filter-item" style="float:right;margin-right:5px;" trigger="click" @command="UnitTypeexport">
                                                <el-button>
                                                      导出
                                                </el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item command="1">导出服务器列表</el-dropdown-item>
                                                      <el-dropdown-item command="2">导出交换机列表</el-dropdown-item>
                                                      <el-dropdown-item command="4">导出防火墙列表</el-dropdown-item>
                                                      <el-dropdown-item command="5">导出CPE列表</el-dropdown-item>
                                                      <el-dropdown-item command="6">导出服务器模版</el-dropdown-item>
                                                      <el-dropdown-item command="7">导出交换机模版</el-dropdown-item>
                                                      <el-dropdown-item command="8">导出防火墙模版</el-dropdown-item>
                                                      <el-dropdown-item command="9">导出CPE模版</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                                    </div>
                                    <el-table :data="tableData" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

                                          <el-table-column align="center" label="序号" width="65">
                                                <template scope="scope">
                                                      <span>{{scope.$index+1+(listQuery.page-1)*listQuery.limit}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="设备类型">
                                                <template scope="scope">
                                                      <span>{{scope.row.eqptTypeName}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="品牌名称">
                                                <template scope="scope">
                                                      <span>{{scope.row.brandName}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="设备型号">
                                                <template scope="scope">
                                                      <span>{{scope.row.modelName}}</span>
                                                </template>
                                          </el-table-column>

                                          <el-table-column align="center" label="操作">
                                                <template scope="scope">
                                                      <el-button size="small" type="success" @click="editUnitType(scope.row)">
                                                            编辑
                                                      </el-button>
                                                      <el-button size="small" type="danger" @click="deleteUnitType(scope.row)">
                                                            删除
                                                      </el-button>
                                                </template>
                                          </el-table-column>
                                    </el-table>
                                    <div v-show="!listLoading" class="pagination-container">
                                          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="this.listQuery.total">
                                          </el-pagination>
                                    </div>
                              </div>
                        </el-tab-pane>
                  </el-tabs>
            </div>
            <!-- 品牌管理标签页中新建编辑dialog -->
            <el-dialog :title="brandText[brandStatus]" :visible.sync="brandFormVisible" style='margin-top:50px;' size="tiny">
                  <el-form :model="brandTemp" :rules="brandRules" ref="brandTemp">
                        <el-form-item label="设备类型" prop="eqptType" :label-width="formLabelWidth">
                              <el-select v-model="brandTemp.eqptType" placeholder="请选择设备/部件类型" :style="inputWidth" :disabled="brandTemp.disabled">
                                    <el-option v-for="brandEqpt in brandEqptUnitList" :key="brandEqpt.dictKey" :label="brandEqpt.dictValue" :value="brandEqpt.dictKey"></el-option>
                              </el-select>
                        </el-form-item>

                        <el-form-item label="品牌名称" prop="brandName" :label-width="formLabelWidth">
                              <el-input v-model="brandTemp.brandName" auto-complete="off" :style="inputWidth" :maxlength="maxlength1"></el-input>
                        </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="brandFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmCreate">确 定</el-button>
                  </div>
            </el-dialog>
            <!-- 设备型号标签页中服务器新建编辑dialog -->
            <el-dialog :title="serverText[serverStatus]" :visible.sync="serverFormVisible">
                  <el-form :model="serverTemp" :rules="serverRules" ref="serverTemp">
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="设备类型" prop="eqptTypeName" :label-width="formLabelWidth">
                                          <el-input v-model="serverTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="品牌名称" prop="brandId" :label-width="formLabelWidth">
                                          <el-select v-model="serverTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                                <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="设备型号" prop="modelName" :label-width="formLabelWidth">
                                          <el-input v-model="serverTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="设备规格" prop="eqptSpec" :label-width="formLabelWidth">
                                          <el-select v-model="serverTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                                <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="CPU品牌" prop="CPUBrandId" :label-width="formLabelWidth">
                                          <el-select v-model="serverTemp.CPUBrandId" placeholder="请选择CPU品牌" :style="inputWidth">
                                                <el-option v-for="CPU in CPUList" :key="CPU.brandId" :label="CPU.brandName" :value="String(CPU.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="核数" prop="CPUCapacity" :label-width="amountWidth">
                                          <el-input v-model.number="serverTemp.CPUCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="数量" prop="CPUAmount" :label-width="amountWidth">
                                          <el-input v-model.number="serverTemp.CPUAmount" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="内存品牌" prop="memoryBrandId" :label-width="formLabelWidth">
                                          <el-select v-model="serverTemp.memoryBrandId" placeholder="请选择内存品牌" :style="inputWidth">
                                                <el-option v-for="memory in memoryList" :key="memory.brandId" :label="memory.brandName" :value="String(memory.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="容量" prop="memoryCapacity" :label-width="amountWidth">
                                          <el-input v-model="serverTemp.memoryCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="数量" prop="memoryAmount" :label-width="amountWidth">
                                          <el-input v-model.number="serverTemp.memoryAmount" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="电源品牌" prop="sourceBrandId" :label-width="formLabelWidth">
                                          <el-select v-model="serverTemp.sourceBrandId" placeholder="请选择电源品牌" :style="inputWidth">
                                                <el-option v-for="source in sourceList" :key="source.brandId" :label="source.brandName" :value="String(source.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="数量" prop="sourceAmount" :label-width="amountWidth">
                                          <el-input v-model.number="serverTemp.sourceAmount" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="网卡品牌" prop="NICBrandId" :label-width="formLabelWidth">
                                          <el-select v-model="serverTemp.NICBrandId" placeholder="请选择网卡品牌" :style="inputWidth">
                                                <el-option v-for="NIC in NICList" :key="NIC.brandId" :label="NIC.brandName" :value="String(NIC.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="数量" prop="NICAmount" :label-width="amountWidth">
                                          <el-input v-model.number="serverTemp.NICAmount" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="硬盘品牌" prop="basic.harddiskBrandId" :label-width="formLabelWidth" :rules="[{ required: true, message: '请选择硬盘品牌', trigger: 'change' }]">
                                          <el-select v-model="serverTemp.basic.harddiskBrandId" placeholder="请选择硬盘品牌" :style="inputWidth">
                                                <el-option v-for="harddisk in harddiskList" :key="harddisk.brandId" :label="harddisk.brandName" :value="String(harddisk.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="容量" prop="basic.harddiskCapacity" :label-width="amountWidth" :rules="[{ required: true, message: '请输入硬盘容量', trigger: 'blur'}]">
                                          <el-input v-model="serverTemp.basic.harddiskCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="数量" prop="basic.harddiskAmount" :label-width="amountWidth" :rules="[{ required: true, message: '请输入数量'}, { type: 'number', message: '请输入数字' }]">
                                          <el-input v-model.number="serverTemp.basic.harddiskAmount" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item>
                                          <el-button @click="addHarddisk">添加</el-button>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row v-for="(item, index) in serverTemp.add" :key="item.key">
                              <el-col :span="12">
                                    <el-form-item label="硬盘品牌" :prop="'add.' + index + '.harddiskBrandId'" :label-width="formLabelWidth" :rules="[{ required: true, message: '请选择硬盘品牌', trigger: 'change' }]">
                                          <el-select v-model="item.harddiskBrandId" placeholder="请选择硬盘品牌" :style="inputWidth">
                                                <el-option v-for="harddisk in harddiskList" :key="harddisk.brandId" :label="harddisk.brandName" :value="String(harddisk.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="容量" :prop="'add.' + index + '.harddiskCapacity'" :label-width="amountWidth" :rules="[{ required: true, message: '请输入硬盘容量', trigger: 'blur'}]">
                                          <el-input v-model="item.harddiskCapacity" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item label="数量" :prop="'add.' + index + '.harddiskAmount'" :label-width="amountWidth" :rules="[{ required: true, message: '请输入数量'}, { type: 'number', message: '请输入数字' }]">
                                          <el-input v-model.number="item.harddiskAmount" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="4">
                                    <el-form-item>
                                          <el-button @click="deleteHarddisk">删除</el-button>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="serverFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmServer">确 定</el-button>
                  </div>
            </el-dialog>
            <!-- 设备型号标签页中交换机新建编辑dialog -->
            <el-dialog :title="switchText[switchStatus]" :visible.sync="switchFormVisible" size="tiny">
                  <el-form :model="switchTemp" :rules="switchRules" ref="switchTemp">
                        <el-form-item label="设备类型" prop="eqptTypeName" :label-width="universalLabelWidth">
                              <el-input v-model="switchTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌名称" prop="brandId" :label-width="universalLabelWidth">
                              <el-select v-model="switchTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                    <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                              </el-select>
                        </el-form-item>
                        <el-form-item label="设备型号" prop="modelName" :label-width="universalLabelWidth">
                              <el-input v-model="switchTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                        <el-form-item label="设备规格" prop="eqptSpec" :label-width="universalLabelWidth">
                              <el-select v-model="switchTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                    <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                              </el-select>
                        </el-form-item>
                        <el-form-item label="接口数量" prop="interfaceNum" :label-width="universalLabelWidth">
                              <el-select v-model="switchTemp.interfaceNum" placeholder="请选择接口数量" :style="inputWidth">
                                    <el-option label="8" value="8"></el-option>
                                    <el-option label="12" value="12"></el-option>
                                    <el-option label="16" value="16"></el-option>
                                    <el-option label="24" value="24"></el-option>
                                    <el-option label="48" value="48"></el-option>
                              </el-select>
                        </el-form-item>
                        <el-form-item label="40G口数量" prop="i40gNum" :label-width="universalLabelWidth">
                              <el-input v-model.number="switchTemp.i40gNum" auto-complete="off" :style="inputWidth"></el-input>
                        </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="switchFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmSwitch">确 定</el-button>
                  </div>
            </el-dialog>
            <!-- 设备型号标签页中防火墙新建编辑dialog -->
            <el-dialog :title="fireWallText[fireWallStatus]" :visible.sync="fireWallFormVisible" size="tiny">
                  <el-form :model="fireWallTemp" :rules="fireWallRules" ref="fireWallTemp">
                        <el-form-item label="设备类型" prop="eqptTypeName" :label-width="universalLabelWidth">
                              <el-input v-model="fireWallTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌名称" prop="brandId" :label-width="universalLabelWidth">
                              <el-select v-model="fireWallTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                    <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                              </el-select>
                        </el-form-item>
                        <el-form-item label="设备型号" prop="modelName" :label-width="universalLabelWidth">
                              <el-input v-model="fireWallTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                        <el-form-item label="设备规格" prop="eqptSpec" :label-width="universalLabelWidth">
                              <el-select v-model="fireWallTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                    <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                              </el-select>
                        </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="fireWallFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmFireWall">确 定</el-button>
                  </div>
            </el-dialog>
            <!-- 设备型号标签页中CPE新建编辑dialog -->
            <el-dialog :title="cpeText[cpeStatus]" :visible.sync="cpeFormVisible">
                  <el-form :model="cpeTemp" :rules="cpeRules" ref="cpeTemp">
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="设备类型" prop="eqptTypeName" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.eqptTypeName" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="品牌名称" prop="brandId" :label-width="formLabelWidth">
                                          <el-select v-model="cpeTemp.brandId" placeholder="请选择品牌" :style="inputWidth">
                                                <el-option v-for="brand in eqptBrandList" :key="brand.brandId" :label="brand.brandName" :value="String(brand.brandId)"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="设备型号" prop="modelName" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.modelName" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="设备规格" prop="eqptSpec" :label-width="formLabelWidth">
                                          <el-select v-model="cpeTemp.eqptSpec" placeholder="请选择设备规格" :style="inputWidth">
                                                <el-option v-for="eqptSpec in eqptSpecList" :key="eqptSpec.dictKey" :label="eqptSpec.dictValue" :value="eqptSpec.dictKey"></el-option>
                                          </el-select>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="CPU型号" prop="cpuModel" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.cpuModel" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="CPU核数" prop="cpuCoreNum" :label-width="formLabelWidth">
                                          <el-input v-model.number="cpeTemp.cpuCoreNum" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="内存型号" prop="ramModel" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.ramModel" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="内存容量" prop="ramVolume" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.ramVolume" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="硬盘型号" prop="diskModel" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.diskModel" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                    <el-form-item label="硬盘大小" prop="diskVolume" :label-width="formLabelWidth">
                                          <el-input v-model="cpeTemp.diskVolume" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                              <el-col :span="12">
                                    <el-form-item label="网口数量" prop="ethernetNum" :label-width="formLabelWidth">
                                          <el-input v-model.number="cpeTemp.ethernetNum" auto-complete="off" :style="inputWidth"></el-input>
                                    </el-form-item>
                              </el-col>
                        </el-row>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="cpeFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmCpe">确 定</el-button>
                  </div>
            </el-dialog>

            <!-- 品牌导入对话框 -->
            <el-dialog :title="importTitle[importStatus]" size="small" :visible.sync="importVisible">
                  <div v-if="importVisible">
                        <dropzone id="Dropzone" :url="uploadUrl[importStatus]" :acceptedFileTypes="'.xls'" @vdropzone-error="showError" @vdropzone-success="showSuccess" ref="submitFiles">
                              <!-- Optional parameters if any! -->
                              <input type="hidden" name="token" value="xxx">
                        </dropzone>
                  </div>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="importVisible = false">取 消</el-button>
                        <el-button type="info" @click="submitFiles">提 交</el-button>
                  </div>
            </el-dialog>
      </div>
</template>
<script>
import Dropzone from '@/components/Drop-zone';

export default {
      components: {
            Dropzone
      },
      data() {
            return {
                  tableData: null,
                  list: null,
                  listCopy: null,
                  listLoading: true,
                  listQuery: {
                        page: 1,
                        limit: 10,
                        total: null
                  },
                  activeName: 'brandManage',
                  brandFormVisible: false,
                  brandStatus: '',
                  brandText: {
                        update: '编辑品牌信息',
                        create: '新建品牌信息'
                  },
                  brandTemp: {
                        eqptType: '',
                        brandName: '',
                        brandId: '',
                        disabled: false
                  },
                  inputWidth: {
                        width: '90%'
                  },
                  formLabelWidth: '80px',
                  universalLabelWidth: '100px',
                  amountWidth: '60px',
                  inPageTemp: {
                        eqptUnitType: '',
                        eqptType: '',
                        brandId: ''
                  },
                  //品牌管理页面下拉设备/部件列表 带-1
                  inPageBrandEqptUnitList: [],
                  //品牌管理页面下拉设备/部件列表 不带-1
                  brandEqptUnitList: [],
                  //设备型号管理页面里 新建下拉列表
                  eqptList: [],
                  //设备型号管理页面下拉设备列表 带-1
                  inPageEqptList: [],
                  //设备型号管理页面下拉品牌列表
                  inPageBrandList: [],
                  //通用 四个设备型号列表
                  eqptBrandList: [],
                  //设备规格下拉列表 1U等
                  eqptSpecList: [],
                  CPUList: [],
                  memoryList: [],
                  sourceList: [],
                  NICList: [],
                  harddiskList: [],
                  brandRules: {
                        eqptType: [
                              { required: true, message: '请选择设备/部件类型', trigger: 'change' }
                        ],
                        brandName: [
                              { required: true, message: '请输入品牌名称', trigger: 'blur' }
                        ]
                  },
                  maxlength1: 20,
                  maxlength2: 50,
                  //服务器的基本信息
                  serverFormVisible: false,
                  serverStatus: '',
                  serverText: {
                        update: '编辑服务器基础信息',
                        create: '新建服务器基础信息'
                  },
                  serverTemp: {
                        eqptTypeName: '服务器',
                        eqptType: '1',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                        CPUBrandId: '',
                        CPUBrandName: '',
                        CPUCapacity: '',
                        CPUAmount: '',
                        CPURelId: '',
                        memoryBrandId: '',
                        memoryBrandName: '',
                        memoryCapacity: '',
                        memoryAmount: '',
                        memoryRelId: '',
                        sourceBrandId: '',
                        sourceBrandName: '',
                        sourceAmount: '',
                        sourceRelId: '',
                        NICBrandId: '',
                        NICBrandName: '',
                        NICAmount: '',
                        NICRelId: '',
                        basic: {
                              harddiskBrandId: '',
                              harddiskBrandName: '',
                              harddiskCapacity: '',
                              harddiskAmount: '',
                        },
                        add: []
                  },
                  serverRules: {
                        eqptTypeName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        brandId: [
                              { required: true, message: '请选择品牌名称', trigger: 'change' }
                        ],
                        modelName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        eqptSpec: [
                              { required: true, message: '请选择设备规格', trigger: 'change' }
                        ],
                        CPUBrandId: [
                              { required: true, message: '请选择CPU品牌', trigger: 'change' }
                        ],
                        CPUCapacity: [
                              { required: true, message: '请输入CPU核数' },
                              { type: 'number', message: '请输入数字' }
                        ],
                        CPUAmount: [
                              { required: true, message: '请输入数量' },
                              { type: 'number', message: '请输入数字' }
                        ],
                        memoryBrandId: [
                              { required: true, message: '请选择内存品牌', trigger: 'change' }
                        ],
                        memoryCapacity: [
                              { required: true, message: '请输入内存容量', trigger: 'blur' }
                        ],
                        memoryAmount: [
                              { required: true, message: '请输入数量' },
                              { type: 'number', message: '请输入数字' }
                        ],
                        sourceBrandId: [
                              { required: true, message: '请选择电源品牌', trigger: 'change' }
                        ],
                        sourceAmount: [
                              { required: true, message: '请输入数量' },
                              { type: 'number', message: '请输入数字' }
                        ],
                        NICBrandId: [
                              { required: true, message: '请选择网卡品牌', trigger: 'change' }
                        ],
                        NICAmount: [
                              { required: true, message: '请输入数量' },
                              { type: 'number', message: '请输入数字' }
                        ]
                  },
                  //储存硬盘数组
                  handdiskArray: [],
                  //交换机的基本信息
                  switchFormVisible: false,
                  switchStatus: '',
                  switchText: {
                        update: '编辑交换机基础信息',
                        create: '新建交换机基础信息'
                  },
                  switchTemp: {
                        eqptTypeName: '交换机',
                        eqptType: '2',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                        interfaceNum: '',
                        i40gNum: ''
                  },
                  switchRules: {
                        eqptTypeName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        brandId: [
                              { required: true, message: '请选择品牌名称', trigger: 'change' }
                        ],
                        modelName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        eqptSpec: [
                              { required: true, message: '请选择设备规格', trigger: 'change' }
                        ],
                        interfaceNum: [
                              { required: true, message: '请选择接口数量', trigger: 'change' },
                        ],
                        i40gNum: [
                              { required: true, message: '请输入40G口数量' },
                              { type: 'number', message: '请输入数字' }
                        ]
                  },
                  //防火墙的基本信息
                  fireWallFormVisible: false,
                  fireWallStatus: '',
                  fireWallText: {
                        update: '编辑防火墙基础信息',
                        create: '新建防火墙基础信息'
                  },
                  fireWallTemp: {
                        eqptTypeName: '防火墙',
                        eqptType: '4',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                  },
                  fireWallRules: {
                        eqptTypeName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        brandId: [
                              { required: true, message: '请选择品牌名称', trigger: 'change' }
                        ],
                        modelName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        eqptSpec: [
                              { required: true, message: '请选择设备规格', trigger: 'change' }
                        ]
                  },
                  //cpe的基本信息
                  cpeFormVisible: false,
                  cpeStatus: '',
                  cpeText: {
                        update: '编辑cpe基础信息',
                        create: '新建cpe基础信息'
                  },
                  cpeTemp: {
                        eqptTypeName: 'cpe',
                        eqptType: '5',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                        cpuModel: '',
                        cpuCoreNum: '',
                        ramModel: '',
                        ramVolume: '',
                        diskModel: '',
                        diskVolume: '',
                        ethernetNum: ''
                  },
                  cpeRules: {
                        eqptTypeName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        brandId: [
                              { required: true, message: '请选择品牌名称', trigger: 'change' }
                        ],
                        modelName: [
                              { required: true, message: '请输入设备类型', trigger: 'blur' }
                        ],
                        eqptSpec: [
                              { required: true, message: '请选择设备规格', trigger: 'change' }
                        ],
                        cpuModel: [
                              { required: true, message: '请输入CPU型号', trigger: 'blur' }
                        ],
                        cpuCoreNum: [
                              { required: true, message: '请输入CPU核数' },
                              { type: 'number', message: '请输入数字' }
                        ],
                        ramModel: [
                              { required: true, message: '请输入内存型号', trigger: 'blur' }
                        ],
                        ramVolume: [
                              { required: true, message: '请输入内存总容量', trigger: 'blur' }
                        ],
                        diskModel: [
                              { required: true, message: '请输入硬盘型号', trigger: 'blur' }
                        ],
                        diskVolume: [
                              { required: true, message: '请输入硬盘大小', trigger: 'blur' }
                        ],
                        ethernetNum: [
                              { required: true, message: '请输入网口数量' },
                              { type: 'number', message: '请输入数字' }
                        ]
                  },
                  importStatus: '',
                  importTitle: {
                        brand: '导入品牌信息',
                        unitType: '导入设备型号信息',
                  },
                  importVisible: false,
                  uploadUrl: {
                        brand: '',
                        unitType: '',
                  },
                  unitTypeUploadUrl: '',
                  //导出品牌地址
                  brandDownloadUrl: '',
                  //导出品牌模版地址
                  brandDownloadUrlTemplate: '',
                  //导出设备类型地址
                  unitTypeDownloadUrl: '',
                  //导出设备类型模版地址
                  unitTypeDownloadUrlTemplate: ''

            };
      },
      created() {
            //获取品牌管理列表
            this.getBrandInfo();
            //获取设备/部件下拉列表
            this.getBrandEqptUnitList();
            //获取 设备下拉列表列表
            this.getEqptList();
            // 获取设备规格
            this.getEqptSpec();
            // console.log(this);
            this.uploadUrl.brand = process.env.BASE_API + '/resman/brands/import';
            this.unitTypeUploadUrl = process.env.BASE_API + '/resman/models/import';

            this.brandDownloadUrl = process.env.BASE_API + '/resman/brands/export';
            this.brandDownloadUrlTemplate = process.env.BASE_API + '/resman/brands/exportTemplate';
            this.unitTypeDownloadUrl = process.env.BASE_API + '/resman/models/export';
            this.unitTypeDownloadUrlTemplate = process.env.BASE_API + '/resman/models/exportTemplate';
      },
      methods: {
            //获取品牌管理列表
            getBrandInfo() {
                  // console.log(this.inPageTemp.eqptUnitType);
                  var url = '';
                  if (this.inPageTemp.eqptUnitType === '-1' || this.inPageTemp.eqptUnitType === '') {
                        url = '/resman/brands';
                  } else {
                        url = '/resman/brands?eqptType=' + this.inPageTemp.eqptUnitType;
                  }
                  this.listLoading = true;
                  this.$http.get(url)
                        .then((response) => {
                              // console.log(response);
                              if (response.code === 0) {
                                    this.list = response.data;
                                    this.listCopy = response.data;
                                    this.listQuery.total = response.data.length;
                                    this.listLoading = false;
                                    this.pageChange(this.listQuery.page);
                              }
                        })
                        .catch(function (response) {
                              console.log(response);
                        })
            },
            //获取设备/部件下拉列表
            getBrandEqptUnitList() {
                  this.$http.get('/sys/dictionary/listById/eqpt_unit_type')
                        .then((response) => {
                              if (response.code === 0) {
                                    var all = [{ dictKey: '-1', dictValue: '全部设备/部件类型' }];
                                    this.brandEqptUnitList = response.data;
                                    this.inPageBrandEqptUnitList = all.concat(response.data);
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // tab标签切换
            handleClick(tab) {
                  if (tab.name === 'brandManage') {
                        this.resetTablelist();
                        this.getBrandEqptUnitList();
                        this.getBrandInfo();
                  } else {
                        this.resetTablelist();
                        this.getEqptListInfo();
                  }
            },
            // 新建 下拉菜单切换 创建设备类型
            handleCommand(command) {
                  if (command === '1') {
                        this.resetServerTemp();
                        this.getEqptBrand(command);
                        this.getAllEqptTypeBrand();
                        this.serverStatus = 'create';
                        this.serverFormVisible = true;
                  } else if (command === '2') {
                        this.resetSwitchTemp();
                        this.getEqptBrand(command);
                        this.switchStatus = 'create';
                        this.switchFormVisible = true;
                  } else if (command === '4') {
                        this.resetFireWallTemp();
                        this.getEqptBrand(command);
                        this.fireWallStatus = 'create';
                        this.fireWallFormVisible = true;
                  } else if (command === '5') {
                        this.resetCpeTemp();
                        this.getEqptBrand(command);
                        this.cpeStatus = 'create';
                        this.cpeFormVisible = true;
                  }
            },
            //以下，分页函数
            handleSizeChange(val) {
                  this.listQuery.limit = val;
                  this.pageChange(this.listQuery.page);
            },
            handleCurrentChange(val) {
                  this.listQuery.page = val;
                  this.pageChange(val);
            },
            pageChange(page) {
                  this.tableData = this.listCopy.slice((page - 1) * this.listQuery.limit, page * this.listQuery.limit);
            },
            //品牌管理新建
            createBrand() {
                  this.resetBrandTemp();
                  this.brandStatus = 'create';
                  this.brandFormVisible = true;
            },
            //品牌管理编辑
            updateBrand(row) {
                  this.resetBrandTemp();
                  this.brandTemp = Object.assign({}, row);
                  this.brandTemp.disabled = true;
                  this.brandStatus = 'update';
                  this.brandFormVisible = true;
            },
            //品牌管理确认新建or编辑信息
            confirmCreate() {
                  var url = '/resman/brand';
                  this.$refs['brandTemp'].validate((valid) => {
                        if (valid) {
                              if (this.brandStatus === 'create') {
                                    this.$http.post(url, {
                                          "brandName": this.brandTemp.brandName,
                                          "eqptType": this.brandTemp.eqptType,
                                    })
                                          .then((response) => {
                                                // console.log(response);
                                                if (response.code === 0) {
                                                      this.brandFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      this.inPageTemp.eqptUnitType = '';
                                                      this.getBrandInfo();
                                                } else {
                                                      this.brandFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    this.$http.put(url, {
                                          "brandId": this.brandTemp.brandId,
                                          "brandName": this.brandTemp.brandName,
                                          "eqptType": this.brandTemp.eqptType,
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.brandFormVisible = false
                                                      this.showMessage('修改成功!', 'success');
                                                      this.inPageTemp.eqptUnitType = '';
                                                      this.getBrandInfo();
                                                } else {
                                                      this.brandFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            //删除品牌
            deleteBrand(row) {
                  const h = this.$createElement;
                  this.$msgbox({
                        title: '删除设备/部件品牌',
                        message: h('p', null, [h('span', null, '是否删除品牌为 '), h('span', { style: 'color: #f00' }, row.brandName), h('span', null, ' 的 '), h('span', { style: 'color:  #20A0FF' }, row.eqptTypeName)]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                  }).then((action) => {
                        if (action === 'confirm') {
                              this.$http.delete('/resman/brand/' + row.brandId)
                                    .then((response) => {
                                          if (response.code === 0) {
                                                this.showMessage("删除成功!", "success");
                                                this.inPageTemp.eqptUnitType = '';
                                                this.getBrandInfo();
                                          } else {
                                                console.log(response.msg);
                                          }
                                    }).catch((response) => {
                                          console.log(response);
                                    })
                        } else {
                              this.showMessage('已取消更改!', 'info');
                        }
                  }).catch(() => {
                        this.$message({
                              type: 'info',
                              message: '已取消删除'
                        });
                  });
            },
            //重置列表信息
            resetTablelist() {
                  this.tableData = null;
                  this.list = null;
                  this.listCopy = null;
                  this.listLoading = true;
                  this.listQuery = {
                        page: 1,
                        limit: 10,
                        total: null
                  }
            },
            //重置品牌管理dialogue
            resetBrandTemp() {
                  if (this.$refs['brandTemp']) {
                        this.$refs['brandTemp'].resetFields();
                  }
                  this.brandTemp = {
                        eqptType: '',
                        brandName: '',
                        brandId: '',
                        diabled: false
                  };
            },
            //上方提示消息
            showMessage(msg, type) {
                  this.$message({
                        message: msg,
                        type: type
                  });
            },
            //重置服务器dialogue
            resetServerTemp() {
                  if (this.$refs['serverTemp']) {
                        this.$refs['serverTemp'].resetFields();
                  }
                  this.serverTemp = {
                        eqptTypeName: '服务器',
                        eqptType: '1',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                        CPUBrandId: '',
                        CPUBrandName: '',
                        CPUCapacity: '',
                        CPUAmount: '',
                        CPURelId: '',
                        memoryBrandId: '',
                        memoryBrandName: '',
                        memoryCapacity: '',
                        memoryAmount: '',
                        memoryRelId: '',
                        sourceBrandId: '',
                        sourceBrandName: '',
                        sourceAmount: '',
                        sourceRelId: '',
                        NICBrandId: '',
                        NICBrandName: '',
                        NICAmount: '',
                        NICRelId: '',
                        basic: {
                              harddiskBrandId: '',
                              harddiskBrandName: '',
                              harddiskCapacity: '',
                              harddiskAmount: '',
                        },
                        add: []
                  }
            },
            //重置交换机 dialogue
            resetSwitchTemp() {
                  if (this.$refs['switchTemp']) {
                        this.$refs['switchTemp'].resetFields();
                  }
                  this.switchTemp = {
                        eqptTypeName: '交换机',
                        eqptType: '2',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                        interfaceNum: '',
                        i40gNum: ''
                  }
            },
            //重置防火墙 dialogue
            resetFireWallTemp() {
                  if (this.$refs['fireWallTemp']) {
                        this.$refs['fireWallTemp'].resetFields();
                  }
                  this.fireWallTemp = {
                        eqptTypeName: '防火墙',
                        eqptType: '4',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                  }
            },
            //重置cpe dialogue
            resetCpeTemp() {
                  if (this.$refs['cpeTemp']) {
                        this.$refs['cpeTemp'].resetFields();
                  }
                  this.cpeTemp = {
                        eqptTypeName: 'cpe',
                        eqptType: '5',
                        brandName: '',
                        brandId: '',
                        modelName: '',
                        modelId: '',
                        eqptSpec: '',
                        cpuModel: '',
                        cpuCoreNum: '',
                        ramModel: '',
                        ramVolume: '',
                        diskModel: '',
                        diskVolume: '',
                        ethernetNum: ''
                  }
            },
            /*************设备管理********************************************************/
            //获取设备类型管理页面列表
            getEqptListInfo() {
                  // console.log(this.inPageTemp.eqptUnitType);
                  var url = '';
                  if (this.inPageTemp.eqptType === '-1' || this.inPageTemp.eqptType === '') {
                        url = '/resman/models';
                  } else {
                        url = '/resman/models?eqptType=' + this.inPageTemp.eqptType + '&brandId=' + this.inPageTemp.brandId;
                  }
                  this.listLoading = true;
                  this.$http.get(url)
                        .then((response) => {
                              // console.log(response);
                              if (response.code === 0) {
                                    this.list = response.data;
                                    this.listCopy = response.data;
                                    this.listQuery.total = response.data.length;
                                    this.listLoading = false;
                                    this.pageChange(this.listQuery.page);
                              }
                        })
                        .catch(function (response) {
                              console.log(response);
                        })
            },
            //获取 设备下拉列表列表
            getEqptList() {
                  this.$http.get('/sys/dictionary/listById/eqpt_type')
                        .then((response) => {
                              if (response.code === 0) {
                                    var all = [{ dictKey: '-1', dictValue: '全部设备类型' }];
                                    this.eqptList = response.data;
                                    this.inPageEqptList = all.concat(response.data);
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            //选择设备列表获取品牌下拉框
            selectEqpt(val) {
                  this.inPageTemp.brandId = '';
                  this.$http.get('/resman/brands?eqptType=' + val)
                        .then((response) => {
                              if (response.code === 0) {
                                    if (response.data.length > 1) {
                                          response.data.unshift({ brandId: '-1', brandName: '全部品牌' });
                                    }
                                    this.inPageBrandList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // 确认新建or编辑服务器
            confirmServer() {
                  var url = '/resman/model/server';
                  var serverUnits = [{
                        "amount": this.serverTemp.CPUAmount,
                        "brandId": this.serverTemp.CPUBrandId,
                        "capacity": this.serverTemp.CPUCapacity,
                        "unitType": "6"
                  }, {
                        "amount": this.serverTemp.memoryAmount,
                        "brandId": this.serverTemp.memoryBrandId,
                        "capacity": this.serverTemp.memoryCapacity,
                        "unitType": "7"
                  }, {
                        "amount": this.serverTemp.sourceAmount,
                        "brandId": this.serverTemp.sourceBrandId,
                        "unitType": "9"
                  }, {
                        "amount": this.serverTemp.NICAmount,
                        "brandId": this.serverTemp.NICBrandId,
                        "unitType": "10"
                  }, {
                        "amount": this.serverTemp.basic.harddiskAmount,
                        "brandId": this.serverTemp.basic.harddiskBrandId,
                        "capacity": this.serverTemp.basic.harddiskCapacity,
                        "unitType": "8"
                  }
                  ];
                  if (this.serverTemp.add.length > 0) {
                        this.serverTemp.add.forEach((item) => {
                              serverUnits.push({
                                    "amount": item.harddiskAmount,
                                    "brandId": item.harddiskBrandId,
                                    "capacity": item.harddiskCapacity,
                                    "unitType": "8"
                              });
                        });
                  }
                  this.$refs['serverTemp'].validate((valid) => {
                        if (valid) {
                              if (this.serverStatus === 'create') {
                                    this.$http.post(url, {
                                          "brandId": this.serverTemp.brandId,
                                          "eqptSpec": this.serverTemp.eqptSpec,
                                          "eqptType": this.serverTemp.eqptType,
                                          "modelName": this.serverTemp.modelName,
                                          "serverUnits": serverUnits
                                    })
                                          .then((response) => {
                                                // console.log(response);
                                                if (response.code === 0) {
                                                      this.serverFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.serverFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    // serverUnits[0].relId = this.serverTemp.CPURelId;
                                    // serverUnits[0].modifyTag = 'update';
                                    // serverUnits[1].relId = this.serverTemp.memoryRelId;
                                    // serverUnits[1].modifyTag = 'update';
                                    // serverUnits[2].relId = this.serverTemp.sourceRelId;
                                    // serverUnits[2].modifyTag = 'update';
                                    // serverUnits[3].relId = this.serverTemp.NICRelId;
                                    // serverUnits[3].modifyTag = 'update';
                                    // serverUnits[4].relId = this.serverTemp.basic.harddiskRelId;
                                    // serverUnits[4].modifyTag = 'update';
                                    // var array1 = [];
                                    // var array2 = [];
                                    // if (this.serverTemp.add.length > 0) {
                                    //       this.serverTemp.add.forEach((item) => {
                                    //             array1.push(item.harddiskRelId);
                                    //       });
                                    // }
                                    // this.handdiskArray.slice(1).forEach((item) => {
                                    //       console.log(item);
                                    //       if (array1.indexOf(item.relId) > -1) {
                                    //             this.serverTemp.add[array1.indexOf(item.relId)].modifyTag = 'update';
                                    //       } else {
                                    //             item.modifyTag = 'del';
                                    //             serverUnits.push(item);
                                    //       }
                                    //       array2.push(item.relId);
                                    // });
                                    // if (this.serverTemp.add.length > 0) {
                                    //       this.serverTemp.add.forEach((item) => {
                                    //             if (array2.indexOf(item.harddiskRelId) < 0) {
                                    //                   serverUnits.push({
                                    //                         "amount": item.harddiskAmount,
                                    //                         "brandId": item.harddiskBrandId,
                                    //                         "capacity": item.harddiskCapacity,
                                    //                         "unitType": "8",
                                    //                         "modifyTag": "add"
                                    //                   });
                                    //             }else {
                                    //                   serverUnits.push({
                                    //                         "amount": item.harddiskAmount,
                                    //                         "brandId": item.harddiskBrandId,
                                    //                         "capacity": item.harddiskCapacity,
                                    //                         "unitType": "8",
                                    //                         "modifyTag": "update",
                                    //                         "relId": item.harddiskRelId,
                                    //                   });
                                    //             }
                                    //       });
                                    // }
                                    this.$http.put(url, {
                                          "brandId": this.serverTemp.brandId,
                                          "eqptSpec": this.serverTemp.eqptSpec,
                                          "eqptType": this.serverTemp.eqptType,
                                          "modelName": this.serverTemp.modelName,
                                          "modelId": this.serverTemp.modelId,
                                          "serverUnits": serverUnits
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.serverFormVisible = false
                                                      this.showMessage('修改成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.serverFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            // 确认新建or编辑交换机
            confirmSwitch() {
                  var url = '/resman/model/switch';
                  this.$refs['switchTemp'].validate((valid) => {
                        if (valid) {
                              if (this.switchStatus === 'create') {
                                    this.$http.post(url, {
                                          "brandId": this.switchTemp.brandId,
                                          "eqptSpec": this.switchTemp.eqptSpec,
                                          "eqptType": this.switchTemp.eqptType,
                                          "modelName": this.switchTemp.modelName,
                                          "i40gNum": this.switchTemp.i40gNum,
                                          "interfaceNum": this.switchTemp.interfaceNum
                                    })
                                          .then((response) => {
                                                // console.log(response);
                                                if (response.code === 0) {
                                                      this.switchFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.cpeFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    this.$http.put(url, {
                                          "brandId": this.switchTemp.brandId,
                                          "eqptSpec": this.switchTemp.eqptSpec,
                                          "eqptType": this.switchTemp.eqptType,
                                          "modelName": this.switchTemp.modelName,
                                          "i40gNum": this.switchTemp.i40gNum,
                                          "interfaceNum": this.switchTemp.interfaceNum,
                                          "modelId": this.switchTemp.modelId
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.switchFormVisible = false
                                                      this.showMessage('修改成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.switchFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            // 确认新建or编辑防火墙
            confirmFireWall() {
                  this.$refs['fireWallTemp'].validate((valid) => {
                        if (valid) {
                              if (this.fireWallStatus === 'create') {
                                    this.$http.post('/resman/model/firewall', {
                                          "brandId": this.fireWallTemp.brandId,
                                          "eqptSpec": this.fireWallTemp.eqptSpec,
                                          "eqptType": this.fireWallTemp.eqptType,
                                          "modelName": this.fireWallTemp.modelName
                                    })
                                          .then((response) => {
                                                // console.log(response);
                                                if (response.code === 0) {
                                                      this.fireWallFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.fireWallFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    this.$http.put('/resman/model/fireWall', {
                                          "brandId": this.fireWallTemp.brandId,
                                          "eqptSpec": this.fireWallTemp.eqptSpec,
                                          "eqptType": this.fireWallTemp.eqptType,
                                          "modelName": this.fireWallTemp.modelName,
                                          "modelId": this.fireWallTemp.modelId
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.fireWallFormVisible = false
                                                      this.showMessage('修改成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.fireWallFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            // 确认新建or编辑CPE
            confirmCpe() {
                  var url = '/resman/model/cpe';
                  this.$refs['cpeTemp'].validate((valid) => {
                        if (valid) {
                              if (this.cpeStatus === 'create') {
                                    this.$http.post(url, {
                                          "brandId": this.cpeTemp.brandId,
                                          "cpuCoreNum": this.cpeTemp.cpuCoreNum,
                                          "cpuModel": this.cpeTemp.cpuModel,
                                          "diskModel": this.cpeTemp.diskModel,
                                          "diskVolume": this.cpeTemp.diskVolume,
                                          "eqptSpec": this.cpeTemp.eqptSpec,
                                          "eqptType": this.cpeTemp.eqptType,
                                          "ethernetNum": this.cpeTemp.ethernetNum,
                                          "modelName": this.cpeTemp.modelName,
                                          "ramModel": this.cpeTemp.ramModel,
                                          "ramVolume": this.cpeTemp.ramVolume,
                                    })
                                          .then((response) => {
                                                // console.log(response);
                                                if (response.code === 0) {
                                                      this.cpeFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.cpeFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    this.$http.put(url, {
                                          "brandId": this.cpeTemp.brandId,
                                          "cpuCoreNum": this.cpeTemp.cpuCoreNum,
                                          "cpuModel": this.cpeTemp.cpuModel,
                                          "diskModel": this.cpeTemp.diskModel,
                                          "diskVolume": this.cpeTemp.diskVolume,
                                          "eqptSpec": this.cpeTemp.eqptSpec,
                                          "eqptType": this.cpeTemp.eqptType,
                                          "ethernetNum": this.cpeTemp.ethernetNum,
                                          "modelName": this.cpeTemp.modelName,
                                          "ramModel": this.cpeTemp.ramModel,
                                          "ramVolume": this.cpeTemp.ramVolume,
                                          "modelId": this.cpeTemp.modelId
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.cpeFormVisible = false
                                                      this.showMessage('修改成功!', 'success');
                                                      this.inPageTemp.eqptType = '';
                                                      this.inPageTemp.brandId = '';
                                                      this.getEqptListInfo();
                                                } else {
                                                      this.cpeFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            // 获取设备规格
            getEqptSpec() {
                  this.$http.get('/sys/dictionary/listById/eqpt_spec')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.eqptSpecList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // 获取四个通用设备的品牌
            getEqptBrand(val) {
                  this.$http.get('/resman/brands?eqptType=' + val)
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.eqptBrandList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // 添加一条 新增硬盘信息
            addHarddisk() {
                  this.serverTemp.add.push({
                        harddiskBrandId: '',
                        harddiskBrandName: '',
                        harddiskCapacity: '',
                        harddiskAmount: '',
                  });
            },
            // 删除一条 删除硬盘信息
            deleteHarddisk(index) {
                  // console.log(index);
                  this.serverTemp.add.splice(index, 1);
            },
            // 编辑四通用设备
            editUnitType(row) {
                  // console.log(row.modelId);
                  this.$http.get('/resman/model/' + row.modelId)
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    if (response.data.eqptType === '1') {
                                          this.resetServerTemp();
                                          this.getAllEqptTypeBrand();
                                          this.serverTemp.brandId = response.data.brandId;
                                          this.serverTemp.modelId = response.data.modelId;
                                          this.serverTemp.modelName = response.data.modelName;
                                          this.serverTemp.eqptSpec = response.data.eqptSpec;
                                          this.handdiskArray = [];
                                          this.getEqptBrand('1');
                                          response.data.serverUnits.forEach((item) => {
                                                if (item.unitType === "6") {
                                                      this.serverTemp.CPUAmount = item.amount;
                                                      this.serverTemp.CPUBrandId = item.brandId;
                                                      this.serverTemp.CPUCapacity = parseInt(item.capacity);
                                                      this.serverTemp.CPURelId = item.relId;
                                                } else if (item.unitType === "7") {
                                                      this.serverTemp.memoryAmount = item.amount;
                                                      this.serverTemp.memoryBrandId = item.brandId;
                                                      this.serverTemp.memoryCapacity = item.capacity;
                                                      this.serverTemp.memoryRelId = item.relId;
                                                } else if (item.unitType === "8") {
                                                      this.handdiskArray.push(item);
                                                } else if (item.unitType === "9") {
                                                      this.serverTemp.sourceAmount = item.amount;
                                                      this.serverTemp.sourceBrandId = item.brandId;
                                                      this.serverTemp.sourceRelId = item.relId;
                                                } else if (item.unitType === "10") {
                                                      this.serverTemp.NICAmount = item.amount;
                                                      this.serverTemp.NICBrandId = item.brandId;
                                                      this.serverTemp.NICRelId = item.relId;
                                                }
                                          });
                                          this.serverTemp.add = [];
                                          this.handdiskArray.forEach((item, i) => {
                                                if (i === 0) {
                                                      this.serverTemp.basic = {
                                                            harddiskBrandId: item.brandId,
                                                            harddiskCapacity: item.capacity,
                                                            harddiskAmount: item.amount,
                                                            harddiskRelId: item.relId
                                                      }
                                                } else if (i > 0) {
                                                      this.serverTemp.add.push({
                                                            harddiskBrandId: item.brandId,
                                                            harddiskCapacity: item.capacity,
                                                            harddiskAmount: item.amount,
                                                            harddiskRelId: item.relId
                                                      });
                                                }
                                          });
                                          this.serverStatus = 'update';
                                          this.serverFormVisible = true;
                                    } else if (response.data.eqptType === '2') {
                                          this.resetSwitchTemp();
                                          this.getEqptBrand('2');
                                          this.switchTemp.brandId = response.data.brandId;
                                          this.switchTemp.modelId = response.data.modelId;
                                          this.switchTemp.modelName = response.data.modelName;
                                          this.switchTemp.eqptSpec = response.data.eqptSpec;
                                          this.switchTemp.i40gNum = response.data.i40gNum;
                                          this.switchTemp.interfaceNum = String(response.data.interfaceNum);
                                          this.switchStatus = 'update';
                                          this.switchFormVisible = true;
                                    } else if (response.data.eqptType === '4') {
                                          this.resetFireWallTemp();
                                          this.getEqptBrand('4');
                                          this.fireWallTemp.brandId = response.data.brandId;
                                          this.fireWallTemp.modelId = response.data.modelId;
                                          this.fireWallTemp.modelName = response.data.modelName;
                                          this.fireWallTemp.eqptSpec = response.data.eqptSpec;
                                          this.fireWallStatus = 'update';
                                          this.fireWallFormVisible = true;
                                    } else if (response.data.eqptType === '5') {
                                          this.resetCpeTemp();
                                          this.getEqptBrand('5');
                                          this.cpeTemp.brandId = response.data.brandId;
                                          this.cpeTemp.modelId = response.data.modelId;
                                          this.cpeTemp.modelName = response.data.modelName;
                                          this.cpeTemp.eqptSpec = response.data.eqptSpec;
                                          this.cpeTemp.ethernetNum = response.data.ethernetNum;
                                          this.cpeTemp.ramModel = response.data.ramModel;
                                          this.cpeTemp.ramVolume = response.data.ramVolume;
                                          this.cpeTemp.cpuCoreNum = response.data.cpuCoreNum;
                                          this.cpeTemp.cpuModel = response.data.cpuModel;
                                          this.cpeTemp.diskModel = response.data.diskModel;
                                          this.cpeTemp.diskVolume = response.data.diskVolume;
                                          this.cpeStatus = 'update';
                                          this.cpeFormVisible = true;
                                    }
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            // 调用所有eqptTpe品牌
            getAllEqptTypeBrand() {
                  this.$http.get('/resman/brands?eqptType=6')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.CPUList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
                  this.$http.get('/resman/brands?eqptType=7')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.memoryList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
                  this.$http.get('/resman/brands?eqptType=9')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.sourceList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
                  this.$http.get('/resman/brands?eqptType=10')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.NICList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
                  this.$http.get('/resman/brands?eqptType=8')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.harddiskList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            //删除设备型号
            deleteUnitType(row) {
                  const h = this.$createElement;
                  this.$msgbox({
                        title: '删除设备型号',
                        message: h('p', null, [h('span', null, '是否删除设备型号为 '), h('span', { style: 'color: #f00' }, row.modelName), h('span', null, ' 的 '), h('span', { style: 'color:  #20A0FF' }, row.eqptTypeName)]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                  }).then((action) => {
                        if (action === 'confirm') {
                              // console.log(row.modelId);
                              this.$http.delete('/resman/model/' + row.modelId)
                                    .then((response) => {
                                          if (response.code === 0) {
                                                this.showMessage("删除成功!", "success");
                                                this.inPageTemp.eqptType = '';
                                                this.inPageTemp.brandId = '';
                                                this.getEqptListInfo();
                                          } else {
                                                console.log(response.msg);
                                          }
                                    }).catch((response) => {
                                          console.log(response);
                                    })
                        } else {
                              this.showMessage('已取消更改!', 'info');
                        }
                  }).catch(() => {
                        this.$message({
                              type: 'info',
                              message: '已取消删除'
                        });
                  });
            },
            //导出品牌信息事件
            brandexport(command) {
                  if (command === 'all') {
                        window.location.href = this.brandDownloadUrl;
                  } else if (command === 'template') {
                        window.location.href = this.brandDownloadUrlTemplate;
                  }
            },
            //导出设备类型信息事件
            UnitTypeexport(command) {
                  if (command === '1') {
                        window.location.href = this.unitTypeDownloadUrl + '?eqptType=1';
                  } else if (command === '2') {
                        window.location.href = this.unitTypeDownloadUrl + '?eqptType=2';
                  } else if (command === '4') {
                        window.location.href = this.unitTypeDownloadUrl + '?eqptType=4';
                  } else if (command === '5') {
                        window.location.href = this.unitTypeDownloadUrl + '?eqptType=5';
                  } else if (command === '6') {
                        window.location.href = this.unitTypeDownloadUrlTemplate + '?eqptType=1';
                  } else if (command === '7') {
                        window.location.href = this.unitTypeDownloadUrlTemplate + '?eqptType=2';
                  } else if (command === '8') {
                        window.location.href = this.unitTypeDownloadUrlTemplate + '?eqptType=4';
                  } else if (command === '9') {
                        window.location.href = this.unitTypeDownloadUrlTemplate + '?eqptType=5';
                  }
            },
            //导入设备类型信息事件
            UnitTypeimport(command) {
                  this.importVisible=true;
                  this.importStatus='unitType';
                  if (command === '1') {
                        this.uploadUrl.unitType = this.unitTypeUploadUrl + '?eqptType=1';
                  } else if (command === '2') {
                        this.uploadUrl.unitType = this.unitTypeUploadUrl + '?eqptType=2';
                  } else if (command === '4') {
                        this.uploadUrl.unitType = this.unitTypeUploadUrl + '?eqptType=4';
                  } else if (command === '5') {
                        this.uploadUrl.unitType = this.unitTypeUploadUrl + '?eqptType=5';
                  }
            },
            //导入文件
            showSuccess(file, response, e) {
                  this.showMessage('文件 ' + file.name + ' 上传成功!', 'success');
                  if (this.importStatus === 'brand') {
                        this.inPageTemp.eqptUnitType = '';
                        this.getBrandInfo();
                  } else {
                        this.inPageTemp.eqptType = '';
                        this.inPageTemp.brandId = '';
                        this.getEqptListInfo();
                  }
            },
            showError(file, error, xhr) {
                  const h = this.$createElement;
                  this.$msgbox({
                        title: '警告',
                        message: h('p', null, [
                              h('p', null, '文件 : ' + file.name + ' 上传失败 !'),
                              h('p', { style: 'color: red;margin-top:0.2em' }, '错误 : ' + error),
                        ]),
                        type: 'warning',
                        confirmButtonText: '确定',
                  })
            },
            submitFiles() {
                  this.$refs.submitFiles.enqueueFiles();
            }
      }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container {
      padding-bottom: 10px;
      .filter-item {
            margin-bottom: 10px;
      }
}

.pagination-container {
      margin-top: 30px;
}
</style>